<template>
  <view class="page black-ground create-invoice-page">
    <div class="page-title">开票信息 Invoice Information</div>
    <div class="wrap">
      <div class="form-box">
        <div class="form-item">
          <div class="label">发票抬头 Invoice Title</div>
          <div class="value-box">
            <input v-model="invoiceFormData.title" type="text" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">纳税人识别号 Taxpayer Identification Number</div>
          <div class="value-box">
            <input v-model="invoiceFormData.taxNum" type="text" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">收票人邮箱 Receiver's Email</div>
          <div class="value-box">
            <input v-model="invoiceFormData.email" type="text" />
          </div>
        </div>

        <div class="form-item">
          <div class="check-ele" :class="{ active: invoiceFormData.isDefault == 1 }" @click="changeDefault">
            <div class="checkbox"></div>
            <div class="text">默认发票信息 Default Invoice Information</div>
          </div>
        </div>
      </div>
      <div class="bottom-control-box">
        <div class="bottom-control-container">
          <div class="wrap">
            <div class="bottom-control-btn">取消 Cancel</div>
            <div class="bottom-control-btn" @click="saveInfo">保存 Save</div>
          </div>
          <bottom-safe-area></bottom-safe-area>
        </div>
        <div>
          <div style="height: 100rpx"></div>
          <bottom-safe-area></bottom-safe-area>
        </div>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
const store = useStore()
import { invoiceInfoAddOrUpd, invoiceInfoDetail } from '@/utils/api/invoice'

interface InvoiceObj {
  id: string | number
  clientUserId: string | number
  title: string | number
  taxNum: string | number
  email: string
  isDefault: string | number
}

let invoiceFormData = ref<InvoiceObj>({
  id: '',
  clientUserId: '',
  title: '',
  taxNum: '',
  email: '',
  isDefault: -1
})

let id: string | number = ''

const goBack = () => {
  uni.navigateBack()
}

const changeDefault = () => {
  invoiceFormData.value.isDefault = invoiceFormData.value.isDefault === 1 ? -1 : 1
}
const saveInfo = async () => {
  if (invoiceFormData.value.title === '') {
    return uni.showToast({
      title: '请填写发票抬头 Invoice Title',
      icon: 'none'
    })
  } else if (invoiceFormData.value.taxNum === '') {
    return uni.showToast({
      title: '请填写纳税人识别号 Taxpayer Identification Number',
      icon: 'none'
    })
  } else if (invoiceFormData.value.email === '') {
    return uni.showToast({
      title: "请填写收票人邮箱 Receiver's Email",
      icon: 'none'
    })
  }
  const { code } = await invoiceInfoAddOrUpd(invoiceFormData.value)
  if (code === 200) {
    uni.navigateBack()
  }
}

const getInfo = async () => {
  const { code, data } = await invoiceInfoDetail({ id })
  if (code == 200) {
    invoiceFormData.value.title = data.title
    invoiceFormData.value.taxNum = data.taxNum
    invoiceFormData.value.email = data.email
    invoiceFormData.value.isDefault = data.isDefault
  }
}
onLoad((opt) => {
  if (opt.id) {
    id = opt.id
    invoiceFormData.value.id = opt.id
    getInfo()
  }
  invoiceFormData.value.clientUserId = store.state.user.userInfo.id
})
</script>

<style lang="scss" scoped>
.form-item {
  .check-ele {
    display: flex;
    align-items: center;
    .checkbox {
      width: 22rpx;
      height: 22rpx;
      background-color: #fff;
      position: relative;
      margin-right: 20rpx;
      &::after {
        content: '';
        display: block;
        width: 18rpx;
        height: 18rpx;
        position: absolute;
        left: 2rpx;
        top: 2rpx;
        border-radius: 50%;
        background-color: #000;
        display: none;
      }
    }
  }
  .check-ele.active {
    .checkbox::after {
      display: block;
    }
  }
  &:last-child {
    border-bottom: none;
  }
}
</style>
